<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head">
    <p>产品分类</p>
    <router-link :to="{name:'shopProductsClassCreate'}" class="ivu-btn ivu-btn-primary">创建分类</router-link>
  </div>

  <div class="ivu-card-body">
    <Table :columns="list.columns" :data="list.items" :loading="list.loading"></Table>
  </div>

  <div class="ivu-card-body"><Page :current="pager.current" :total="pager.totalItems" :page-size="pager.limit" show-total @on-change="onChangePage"></Page></div>
</div>
</template>

<script>
import Vue from 'vue';
import { Table, Page, Poptip, Message } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import auth from '@/utils/auth';
import apiConfig from '@/utils/apiConfig';

Vue.component('Poptip', Poptip);

export default {
  components: {
    [Table.name]: Table,
    [Page.name]: Page
  },
  data() {
    return {
      config: {},
      token: auth.getToken(),
      list: {
        columns: [
          {title: '分类ID', key: 'products_class_id', align: 'center'},
          {title: '分类名称', key: 'name', align: 'center'},
          {title: '分类状态', key: 'status', align: 'center', render: (h, params) => { return h('span', this.config['common_status'][this.list.items[params.index].status]); }},
          {title: '创建时间', key: 'create_time', align: 'center', render: (h, params) => { return h('span', new Date(parseInt(this.list.items[params.index].create_time) * 1000).toLocaleString()); }},
          {title: '修改时间', key: 'last_update_time', align: 'center', render: (h, params) => { return h('span', new Date(parseInt(this.list.items[params.index].create_time) * 1000).toLocaleString()); }},
          {title: '操作', key: 'action', align: 'center', render: (h, params) => {
            var _this = this;
            return h('div', [
              h('a', {
                class: 'ivu-btn ivu-btn-primary ivu-btn-small',
                style: {
                  marginRight: '5px'
                },
                on: {
                  click() {
                    _this.$router.push({name: 'shopProductsClassUpdate', params: {'products_class_id': _this.list.items[params.index].products_class_id}});
                  }
                }
              }, '修改'),
              h('Poptip', {
                props: {
                    confirm: true,
                    title: '删除后不可恢复?',
                    transfer: true
                },
                on: {
                  "on-ok": () => {
                    this.onDelete(_this.list.items[params.index].products_class_id);
                  }
                }
              }, [
                h('a', {
                  class: 'ivu-btn ivu-btn-error ivu-btn-small',
                  style: {
                    marginRight: '5px'
                  }
                }, '删除')
              ])
            ]);
          }},
        ],
        loading: false,
        items: []
      },
      pager: {
        current: 1,
        limit: 10,
        totalItems: 0
      }
    };
  },
  methods: {
    _initialize() {
      this.getData();
    },
    getData() {
      let _this = this;
      _this.list.loading = true;
      ajaxiView.get('/products/class?token='+_this.token+'&page='+_this.pager.current).then(function(data) {
        if(data !== false && typeof(data.pager) != 'undefined') {
          _this.list.items = data.pager.items;
          _this.pager.current = data.pager.current;
          _this.pager.limit = data.pager.limit;
          _this.pager.totalItems = data.pager.total_items;
        }

        _this.list.loading = false;
      });
    },
    onChangePage(current) {
      this.pager.current = current;
      this.getData();
    },
    onDelete(id) {
      var _this = this;
      ajaxiView.delete('/products/class/'+id+'?token='+_this.token).then(function(data) {
        if(data !== false) {
          Message.success(data.msg);
          _this.onChangePage(1);
        }
      });
    }
  },
  mounted() {
    var _this = this;
    apiConfig.getItem().then(function(value) {
      _this.config = value;
      _this._initialize();
    });
  }
}
</script>

<style>
</style>